<template>
  <div>
<!--  <basic-container-one>-->
<!--  </basic-container-one>-->
    <div style="margin: 30px 30px 0 30px">
      <div style="
        height: 120px;margin-top: 10px;border-radius: 10px;
        background-image: url('https://yulonghuyu.oss-cn-hangzhou.aliyuncs.com/app-web/xitong/%E5%9B%BE%E5%B1%82%201601%402x.png');
          background-size: 100% 100%;
          padding: 0 39px;
          display: flex;
          justify-content: space-between;
          align-items: center;">
        <div style="display: flex;flex-wrap: wrap;align-items: center;flex: 0 0 50%">
          <span style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;color: #666666;">今日角色数</span>
          <span style="font-size: 28px;color: #000000;font-family: Source Han Sans CN;font-weight: 700;margin-left: 8%">{{number.todayNumber}}</span>
          <span style="height: 66px;border: 1px solid #E5E5E5;margin-left: 16%"></span>
          <span style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;color: #666666;margin-left: 16%">昨日角色数</span>
          <span style="font-size: 28px;color: #000000;font-family: Source Han Sans CN;font-weight: 700;margin-left: 8%">{{number.yesterdayNumber}}</span>
        </div>
        <div style="flex: 0 0 50%;display: flex;justify-content: flex-end">
          <el-button icon="el-icon-refresh-left" type="primary" @click="onSubmit">刷新</el-button>
        </div>
      </div>
    </div>
    <basic-container>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true">
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formInline.typeId" @change="selectType" clearable placeholder="平台名称">
              <el-option
                v-for="item in gameType"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.projectId" @change="selectProject" filterable clearable placeholder="游戏">
              <el-option
                v-for="item in gamelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.gameId"  @change="selectPhone"  clearable  placeholder="设备">
              <el-option
                v-for="item in gamePhonelist"
                :key="item.id"
                :label="item.gameName +'-'+ item.phoneName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.serverNum"  @click.native="selectServer" filterable clearable placeholder="区服名称">
              <el-option
                v-for="item in gameserverlist"
                :key="item.serverNum"
                :label="item.serverNum + ' - ' + item.serverName"
                :value="item.serverNum"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="关键字" v-model=" input " clearable class="input-with-select">
              <el-select v-model="select" slot="prepend" >
                <el-option label="角色名称" value="角色名称"></el-option>
                <el-option label="玩家账号" value="玩家账号"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select  v-model="formInline.userPid" filterable clearable @change="selectLead" placeholder="组长">
              <el-option
                v-for="item in lead"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.promoterId" filterable clearable placeholder="推广员">
              <el-option
                v-for="item in promoter"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="formInline.nowuser">本账号推广</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="time"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="起始等级" v-model="formInline.startLevel"/>
          </el-form-item>
          <el-form-item>
            <span>至</span>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="结束等级" v-model="formInline.endLevel"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            @sort-change="onSortChange"
            stripe
            style="width: 100%">
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!='' && scope.row.registerWay == 1"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="gameName"
              label="游戏">
            </el-table-column>
            <el-table-column
              prop="phoneName"
              width="80"
              label="平台">
            </el-table-column>
            <el-table-column
              prop="serverNum"
              sortable="custom"
              width="120"
              :sort-orders="['ascending','descending']"
              label="区服号">
            </el-table-column>
            <el-table-column
              prop="serverName"
              label="区服名称">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称">
            </el-table-column>
            <el-table-column
              prop="roleLevel"
              sortable="custom"
              width="70"
              :sort-orders="['ascending','descending']"
              label="等级">
            </el-table-column>
            <el-table-column
              prop="createTime"
              sortable="custom"
              :sort-orders="['ascending','descending']"
              label="创建时间">
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="最后上报时间">
            </el-table-column>
            <el-table-column
              prop="device"
              label="设备型号">
            </el-table-column>
            <el-table-column
              prop="paccount"
              width="100"
              label="组长账号">
            </el-table-column>
            <el-table-column
              prop="promoter"
              width="90"
              label="推广员账号">
            </el-table-column>
            <el-table-column
              prop="address"
              width="80"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click.native="viewRole(scope.row)">查看更多</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
      <el-dialog title="查看角色" :visible.sync="dialogFormViewUser" @close="closeViewUser()"  customClass="customViewRole">
        <div v-if="showViewUser">
          <roleIndexdeatils :row="row"></roleIndexdeatils>
        </div>
      </el-dialog>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>

import {getLeadList, getpromoterList} from "@/api/system/user";
import {getUserRoleList} from "@/api/system/details";
import {gameList, gamePhoneList, gameserverList, gameTypeList} from "@/api/game/game";
import VueElementLoading from 'vue-element-loading'
import {userRoleNumber} from "@/api/system/todaytotal";
import roleIndexdeatils from "@/views/role/indexdeatils";
export default {
  data() {
    return {
      dialogFormViewUser:false,
      showViewUser:false,
      userId:'',
      isActive: false,
     leading:true,
      input:'',
      row:{},
      select: '角色名称',
      leadlevel:3,//组长等级
      lead:{},
      number: {},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      promoter:{},
      promoterDTO:{
        id:'',
        userPid:'',
        level:4,
      },
      time: [new Date(new Date().setHours(0, 0, 0, 0)),new Date(new Date().setHours(23, 59, 59, 0))],
      gamelist:[],
      gameType:[],
      gamePhonelist:[],
      gameserverlist:[],
      tableData:[],
      formInline: {
        typeId: '',
        serverNum:'',
        gameTypeId:'',
        gameId:'',
        projectId:'',
        phone:'',
        startLevel:'',
        endLevel:'',
        userPid:'',
        promoterId: '',
        roleName:'',
        account: '',
        nowuser:false,
        sortserverNum:'',
        sortroleLevel:'',
        sortcreateTime:'descending',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: ''
    };

  },
  components: {
    roleIndexdeatils,
    VueElementLoading
  },
  computed: {},
  created() {
    this.nowload(this.leadlevel);
    let startTime;
    let endTime;
    if (this.isNotEmpty(this.time)) {
      startTime = this.time[0].getTime()
      endTime = this.time[1].getTime()
    }
    this.onload(startTime, endTime);
    this.game();
    this.gameTypeList()
    this.phone()
    userRoleNumber().then(res=>{
      const data = res.data;
      this.number=data
    })
  },
  methods: {
    onSortChange({ prop, order }) {
      if(prop=='serverNum'){
        this.$set(this.formInline, 'sortcreateTime', '')
        this.$set(this.formInline, 'sortserverNum', order)
        this.$set(this.formInline, 'sortroleLevel', '')
      }
      if(prop=='roleLevel'){
        this.$set(this.formInline, 'sortcreateTime', '')
        this.$set(this.formInline, 'sortserverNum', '')
        this.$set(this.formInline, 'sortroleLevel', order)
      }
      if(prop=='sortcreateTime'){
        this.$set(this.formInline, 'sortroleLevel', '')
        this.$set(this.formInline, 'sortserverNum', '')
        this.$set(this.formInline, 'sortcreateTime', order)
      }
      this.onSubmit()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      var startTime = undefined;
      var endTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.onload(startTime, endTime);
    },
    viewRole(row) {
      this.showViewUser = false
      this.dialogFormViewUser = true
      this.showViewUser = true
      this.row=row
    },
    closeViewUser(){
      this.showViewUser = false
      this.dialogFormViewUser = false
      this.row={}
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      var startTime = undefined;
      var endTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }

      this.onload(startTime, endTime);
    },
    selectType(value){
      this.$set(this.formInline, 'projectId', '')
      this.$set(this.formInline, 'gameId', '')
      this.$set(this.formInline, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};


      }
      this.formInline.typeId=value
      this.game()
      this.phone()

    },
    selectProject(value){
      this.$set(this.formInline, 'gameId', '')
      this.$set(this.formInline, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};

      }
      this.formInline.projectId=value
      this.phone()
      this.server()
    },
    selectPhone(value){
      this.$set(this.formInline, 'serverNum', '')
      if(value==''){
        this.gameserverlist={};

      }
      this.formInline.gameId=value
      this.server()
    },
    selectServer(){
      if(this.formInline.projectId==''&&this.formInline.gameId==''){
        this.gameserverlist={};
        this.$message({
          type: "error",
          message: "请先选择游戏"
        });
        return;
      }
    },
    selectLead(value){
      this.$set(this.formInline, 'promoterId', '')
      if(value==''){
        this.promoter={};
        return;
      }
      this.promoterDTO.userPid=value
      getpromoterList(this.promoterDTO).then(res => {
        const data = res.data.data;
        this.promoter= data;
      });
    },
    server(){
      gameserverList(this.formInline).then(res => {
        const data = res.data.data;
        this.gameserverlist = data;
      });
    },
    phone(){
      this.formInline.gameTypeId=this.formInline.typeId
      gamePhoneList(this.formInline).then(res => {
        const data = res.data.data;
        this.gamePhonelist = data;
      });
    },
    game(){
      gameList(this.formInline).then(res => {
        const data = res.data.data;
        this.gamelist = data;
      });
    },

    gameTypeList(){
      gameTypeList().then(res => {
        const data = res.data.data;
        this.gameType = data;
      });

    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },

    onSubmit() {

      var startTime = undefined;
      var endTime = undefined;
      console.log('this.time', this.time)
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.page.currentPage=1
      this.onload(startTime, endTime);
      userRoleNumber().then(res=>{
        const data = res.data;
        this.number=data
      })
    },
    nowload(level) {
      this.loading = true,
        getLeadList('', level).then(res => {
          const data = res.data.data;
          this.lead = data;
          this.loading = false;
        });
    },
    onload(startTime,endTime){
      if(this.select=='角色名称'){
        this.formInline.account=''
        this.formInline.roleName=this.input
      }else{
        this.formInline.roleName=''
        this.formInline.account=this.input
      }
      this.loading = true;
      this.isActive = true;
      getUserRoleList(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime,endTime).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    },
  },
}

</script>

<style>
.customViewRole{
  width: 50%;
  background-color: #FFFFFF !important;
}
</style>
